<!-- 发布列表 添加分组-->
<template>
  <!--:toolkit="['size', 'columns', 'fullscreen']"  ：大小，行数，是否全屏展示，不加，则会展示全部（包含刷新）-->
  <ele-pro-table
    ref="table"
    size="mini"
    :columns="columns"
    :datasource="datasource"
    :selection.sync="selection"
    :need-page="true"
    :hideOnSinglePage="true"
  >
    <!--头部按钮-->
    <template v-slot:toolbar>
      <div class="btn-class">
        <el-button type="danger" size="small" @click="delMoreGroup">
          删除
        </el-button>
      </div>
    </template>
    <!--任务进度插槽-->
    <template v-slot:progress="{ row }">
      <!--      <div  style="padding: 20px 0">-->
      <!--      <div v-if="row.progress==100" class="completed flex"><span>已完成</span></div>-->
      <el-progress :percentage="row.taskProgressCount || 0"></el-progress>
      <!--      </div>-->
    </template>
    <!--操作-->
    <template v-slot:action="{ row }">
      <div class="flex-around">
        <el-link
          type="primary"
          :underline="false"
          @click.stop="edit(row)"
        >
          查看进度
        </el-link>
        <el-link
          type="success"
          :underline="false"
          @click.stop="taskLink(row)"
          v-if="publish.types==1"
        >
          任务链接
        </el-link>
        <!--notTask ： 0.不能终止，2 可以终止-->
        <el-link
          type="danger"
          :underline="false"
          :disabled="row.notTask!=2"
          @click.stop="terminateTaskSingle(row)"
        >
          <!--终止任务， 进度进行中 已终止，100%——已完成-->
          {{row.notTask==2 ? '终止任务' : row.taskProgressCount==100 &&row.notTask==0 ? '已完成' : row.taskProgressCount!=100 &&row.notTask==0 ? '已终止' : '' }}
        </el-link>
        <!--
        notTask ： 0.不能终止，2 可以终止
        但任务进度（taskProgressCount）为100 || 终止任务不能终止时（代表已终止），则可以去删除-->
        <el-link
          :disabled="row.notTask==0 || row.taskProgressCount==100 ? false : true"
          type="danger"
          :underline="false"
          @click.stop="delSingle(row)"
        >
          删除
        </el-link>
      </div>
    </template>
    <!-- ‘查看进度’ 抽屉 -->
    <!-- :direction="direction" -->
    <el-drawer
      title="查看进度"
      size="60%"
      :visible.sync="showEdit">
      <div class="flex-between top-padding">
        <div class="cloumn-data" v-for="(i,j) in list" :key="j">
          <span>{{i.name}}</span>
          <div class="font-overflow">{{i.num}}</div>
        </div>
      </div>
      <el-button icon="el-icon-refresh-right" type="primary" class="btn-refresh" @click="dataRefresh">数据刷新</el-button>

      <div class="m-table">
        <!--toolkit：大小，行数，是否全屏展示，不加，则会展示全部（包含刷新）
            toolDefault: 表头背景 -->
        <ele-pro-table
          ref="accountTable"
          :toolkit="[]"
          size="mini"
          :columns="columns2"
          :datasource="listData"
          :selection.sync="selection"
          :need-page="true"
          :hideOnSinglePage="false"
        >
          <!--头部按钮-->
          <template v-slot:toolbar>
            <div class="flex-align-center" v-if="publish.types==4">
              <div v-for="(i,j) in ksStautsList" :key="j" @click="stautsClick(j)" :class="stautsIndex==j ? 'sel-stauts-class' : 'stauts-class' ">{{i.name}}</div>
            </div>
            <div class="flex-align-center" v-else>
              <div v-for="(i,j) in stautsList" :key="j" @click="stautsClick(j)" :class="stautsIndex==j ? 'sel-stauts-class' : 'stauts-class' ">{{i.name}}</div>
            </div>
            <!--<div class="btn-class">
              &lt;!&ndash; publish.types ： 1_h5  2_cookie 3_代员工发布到抖音 4_快手&ndash;&gt;
              <el-button type="primary" size="small" class="m-left20" @click="viewComments" v-if="publish.types==2">
                作品置顶
              </el-button>
              <el-button type="primary" size="small" class="m-left20" @click="dataRefresh" :loading="loading">
                数据刷新
              </el-button>
            </div>-->
          </template>
          <!-- 头像列 -->
          <template v-slot:head="{ row }">
            <div style="line-height: 1;position: relative;padding: 10px 0">
              <div class="top-class flex" v-if="row.isTop==true">置顶</div>
              <el-avatar v-if="row.head" :src="row.head" :size="40" />
            </div>
          </template>
          <!--          taskStatus:0,未发布，则默认重置曝光量等为0
                        `task_status` int(11) DEFAULT NULL COMMENT '发布状态0未发布1发布中2发布完成3发布错误',+-->
          <!--曝光量-->
          <template v-slot:playCount="{ row }">
            <!--抖音原从list 拿，已修改成对象拿-->
            <div>{{ row.taskStatus==0 ? 0 : row.exposureAmount ? row.exposureAmount : 0}}</div>
          </template>
          <!--点赞数-->
          <template v-slot:diggCount="{ row }">
            <div>{{ row.taskStatus==0 ? 0 : row.upvoteAmount ? row.upvoteAmount : 0}}</div>
          </template>
          <!--评论数-->
          <template v-slot:commentCount="{ row }">
            <div>{{ row.taskStatus==0 ? 0 : row.commentAmount ? row.commentAmount : 0}}</div>
          </template>
          <!--执行status-->
          <template v-slot:taskStatus="{ row }">
            <div class="flex">
              <!--publishStatus 快手发布状态（1.已执行（成功） 2.未执行（待发布）',-->
              <div v-if="row.taskStatus==2 || row.publishStatus==1" class="success flex s-dai">成功</div>
              <div v-if="row.taskStatus==3" class="fail flex-column">
                <i class="el-icon-warning" style="color: #FF4D4F;font-size: 16px"></i>
                <span>失败</span>
              </div>
              <div v-if="row.taskStatus==0 || row.publishStatus==2" class="s-dai">待发布</div>
              <div v-if="row.taskStatus==1" class="s-dai">发布中</div>
            </div>
          </template>
          <!--执行信息-->
          <template v-slot:hint="{ row }">
            <!-- publish.types ： 1_h5  2_cookie 3_代员工发布到抖音 4_快手-->
            <!--publishStatus 快手发布状态（1.已执行（成功） 2.未执行（待发布）', 没有失败状态-->
            <div class="font-overflow" v-if="publish.types==4">{{row.publishStatus==1 ? '执行成功' : ''}}</div>
            <div class="font-overflow" :style="row.taskStatus==3?'color:red':''" v-else>{{row.taskStatus==2 ? '执行成功' : row.taskStatus==3 ? '执行失败' : ''}}</div>
          </template>
<!--          发布时间-->
          <template v-slot:publishTime="{ row }">
            <!-- publish.types ： 1_h5  2_cookie 3_代员工发布到抖音 4_快手-->
            <!--publishStatus 快手发布状态（1.已执行（成功） 2.未执行（待发布）', 没有失败状态-->
            <div>{{publish.types==4 ? publishTimeCom(row) : row.publishTime}}</div>
          </template>
          <!--操作-->
          <!-- publish.types ： 1_h5  2_cookie 3_代员工发布到抖音 4_快手-->
          <!--矩阵发布列表—查看进度功能按钮
          抖音cookie：查看评论，置顶，手动补发
          抖音h5：查看/回复评论，任务链接
          待用户发布到抖音：手动补发
          快手：观看作品-->
          <template v-slot:action="{ row }">
            <!-- <el-link
               :disabled="row.doyiDate && row.doyiDate.list[0].statistics.comment_count > 0 ? false : true"
               type="primary"
               :underline="false"
               @click.stop="viewComments(row)"
               v-if="publish.types==1 || publish.types==2"
             >
               查看评论
             </el-link>-->
            <!--只有抖音有-->
            <el-link
              :disabled="!row.videUrl"
              type="primary"
              :underline="false"
              @click.stop="viewWorks(row)"
            >
              观看作品
            </el-link>
            <!--<el-link
              type="info"
              :underline="false"
              @click.stop="topClick(row)"
              v-if="publish.types==2"
            >
              置顶
            </el-link>-->
          </template>
        </ele-pro-table>
      </div>
    </el-drawer>
    <!--查看评论-->
    <seeComment ref="comments" :visible.sync="isComments" :commentId="commentId"></seeComment>
    <!--h5生成链接-->
    <!--<agent-code :visible.sync="agentVisible" ref="code" :type="1" :link="1"></agent-code>-->
    <!--修改为2,因为图片是b64的-->
    <agent-code :visible.sync="agentVisible" ref="code" :type="1" :link="1"></agent-code>
  </ele-pro-table>
</template>

<script>
  import {queryGroup, areaList, addGroup, delDypublish , getPublishPage, getKSPage,terminateTask,matrixDataRefresh} from "@/api/matrixManage/groupManage";
  import {accountQuery, delAccount} from "@/api/matrixManage/accountList";
  import {getEventDetails,getKSEventDetails, douyinShare, publishCreate, getEventDetailsList } from "@/api/releaseManage/tiktok";
  import seeComment from "./see-comments"
  import AgentCode from "@/layout/components/agent-code";
  import {addUser, updateUser} from "@/api/equipmentManagement";
  export default {
    props: {
      // 表格数据  需传入form的值，做表格数据筛选
      publish:Object
    },
    components:{seeComment,AgentCode},



    data() {
      const oldList = [
        {
          name:'发布成功',
          num:0
        },{
          name:'待发布',
          num:0
        },{
          name:'发布失败',
          num:0
        },{
          name:'曝光总量',
          num:0
        },{
          name:'点赞总数',
          num:0
        },{
          name:'评论总数',
          num:0
        },
      ];

      return {
        stautsIndex:'',
        // 0未发布1发布中2发布完成3发布错误
        stautsList :[
          {
            name:'全部',
            id:''
          },
          {
            name:'待发布',
            id:0
          },
          /*{
            name:'发布中',
            id:1
          },*/
          {
            name:'发布成功',
            id:2
          },
          {
            name:'发布失败',
            id:3
          }
        ],
        // 发布完成1 未发布2——（快手没有发布失败状态）
        ksStautsList :[
          {
            name:'全部',
            id:''
          },
          {
            name:'待发布',
            id:2
          },
          {
            name:'发布成功',
            id:1
          },
          {
            name:'发布失败',
            id:3
          }
        ],
        oldList,
        loading:false,
        list:[...oldList],
        agentVisible:false, //'任务链接'入口二维码
        // 是否弹出“查看评论”弹出框
        isComments:false,
        // 查看评论——用户id
        commentId:null,
        // 账号列表传值
        accountLists:{
          /*page: 1,// 分页参数 *必需
          limit: 10, // 每页展示多少数量  *必需*/
          // username:this.$store.state.user.info.username,
        },
        // 当前编辑数据
        current: null,
        // 是否显示编辑弹窗
        showEdit: false,
        // 表格列配置
        columns: [
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center'
          },
          {
            prop: 'name',
            label: '任务名称',
            align: 'center',
            showOverflowTooltip: true
          },
          /*{
            prop: 'accountCount',
            label: '剪辑名称',
            align: 'center',
            showOverflowTooltip: true
          },*/
          /*{
            prop: 'projectName',
            label: '关联创作',
            align: 'center',
            showOverflowTooltip: true
          },*/
          {
            slot: 'progress',
            prop: 'progress',
            label: '任务进度',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            prop: 'createTime',
            label: '创建时间',
            align: 'center',
            showOverflowTooltip: true
          },
          {
            label: '操作',
            columnKey: 'action',
            width: 330,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],

        // "查看进度" 表格项
        columns2:[
          // 作品置顶选择
          {
            columnKey: 'selection',
            type: 'selection',
            width: 45,
            align: 'center',
            show: false
          },
          {
            width:95,
            prop: 'head',
            label: '头像',
            align: 'center',
            showOverflowTooltip: true,
            slot: 'head'
          },
          {
            prop: 'nickname',
            label: '用户昵称',
            align: 'center',
            showOverflowTooltip: true,
            width:120
          },
          {
            slot: 'playCount',
            prop: 'doyiDate',
            label: '曝光量',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            slot: 'diggCount',
            prop: 'doyiDate',
            label: '点赞数',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            slot: 'commentCount',
            prop: 'doyiDate',
            label: '评论数',
            align: 'center',
            showOverflowTooltip: true,
          },
          {
            slot: 'taskStatus',
            prop: 'taskStatus',
            label: '发布状态',
            align: 'center',
            showOverflowTooltip: true,
            width:120
          },
          {
            slot: 'hint',
            prop: 'hint',
            label: '执行信息',
            align: 'center',
            showOverflowTooltip: true,
            show:false,
            width:120
          },
          {
            slot: 'publishTime',
            prop: 'publishTime',
            label: '(待)发布时间',
            align: 'center',
            showOverflowTooltip: true,
            width:150
          },
          {
            label: '操作',
            columnKey: 'action',
            show:true,
            width: 230,
            align: 'center',
            resizable: false,
            slot: 'action',
            hideInSetting: true,
            showOverflowTooltip: true,
            fixed: 'right'
          }
        ],
        // 表格选中数据
        selection: [],
      };
    },

    computed: {
      // 拼接发布时间
      publishTimeCom() {
        return function(row){
          let publishTimeCom = '';
          const currentYear = new Date().getFullYear();
          console.log("拼接发布时间row",row)
          publishTimeCom=currentYear+'-'+row.releaseDate+' '+row.releaseTime.split('-')[0]+':'+row.releaseTime.split('-')[1]
          return publishTimeCom;
        }
      }
    },
    created(){
    },
    methods: {
      // “查看进度” 弹出框，筛选状态事件
      stautsClick(index){
        this.stautsIndex=index
        this.getPublishPage(this.current)
      },

      getPublishPage(row){
        this.loading=true  // 展示表格过渡中
        if(this.stautsIndex!=0){
          if(this.publish.types==4){
            // 发布状态(taskStatus): 0未发布1发布中2发布完成3发布错误
            this.accountLists.taskStatus=this.ksStautsList[this.stautsIndex].id
          }
          else{
            // 发布状态(taskStatus): 0未发布1发布中2发布完成3发布错误
            this.accountLists.taskStatus=this.stautsList[this.stautsIndex].id
          }
        }
        else{
          delete this.accountLists.taskStatus
        }
        this.reloadList()
      },
      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async datasource({ page, limit, where, order }) {
        const result= {}
        // =4 为快手，需要单独调用接口
        if(this.publish.types==4){
          const result = await getKSPage({ ...where, ...order, page, limit,
            merchantId: this.$store.state.user.info.merchantId,  // 商家id
            ...this.publish
          });
          console.log("result11",result)
          return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
        }
        else{
          const result = await getPublishPage({ ...where, ...order, page, limit,...this.publish});
          console.log("result22222",result)
          return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
        }
      },
      /* '发布列表' 表格数据源 */
      /*datasource({ page, limit, where, order }) {
        return getPublishPage({ ...where, ...order, page, limit,...this.publish});
      },*/
      /* 刷新表格 */
      reload(where) {
        console.log('this.publish',this.publish)
        this.$refs.table.reload({ page: 1, where: where });
      },
      /* '发布列表'——账号列表 表格数据源 */
      /*listData({ page, limit, where, order }) {
        return getEventDetails({ ...where, ...order, page, limit,...this.accountLists});
      },*/
      /* 如果想在数据源里面获取到接口返回的数据, 增加 async 和 await */
      async listData({ page, limit, where, order }) {
        console.log("page, limit, where, order",page, limit, where, order,'this.accountLists',this.accountLists)
        let result={}
        console.log("this.publish.types",this.publish.types)
        // <!-- publish.types ： 1_h5  2_cookie 3_代员工发布到抖音 4_快手-->
        if(this.publish.types==4){
          console.log(11111111111)

          result = await getKSEventDetails({ ...where, ...order, page, limit, ...this.accountLists });
        }
        else{          console.log(2222222222222222)

          result = await getEventDetails({ ...where, ...order, page, limit, ...this.accountLists });
        }


        return result;  // 这里返回的数据要包含 list 和 count 两个字段，字段名称可以通过 response 属性配置
      },

      // 查询“查看进度”list总数
      allGetNum(){
        this.list[0].num=0
        this.list[1].num=0
        this.list[2].num=0
        this.list[3].num=0
        this.list[4].num=0
        this.list[5].num=0
        // this.list=this.oldList  // 重置总数据

        const detailsApi = this.publish.types==4 ? getKSEventDetails : getEventDetailsList;
        detailsApi(this.accountLists)
          .then((data) => {
            console.log('查询“查看进度”list总数data',data)
            let list=data.length>0?data:[]
            /*`task_status：'发布状态0未发布1发布中2发布完成3发布错误'*/
            let daiRelease=0  //待发布(总)
            let successRelease=0   //发布成功(总)
            let failRelease=0    //发布失败(总)
            let playAll=0    //曝光数(总)
            let diggAll=0    //点赞数(总)
            let commentAll=0    //评论数(总)

            for(let i=0 ;i<list.length;i++){
              console.log('list[i]',list[i])
              // publish.types ： 1_h5  2_cookie 3_代员工发布到抖音 4_快手
              // publishStatus 快手发布状态（1.已执行（成功） 2.未执行（待发布）', 没有失败状态
              console.log("this.publish.types",this.publish.types)
              if(this.publish.types==4){
                if(list[i].publishStatus==2){
                  daiRelease++ //待发布
                }
                if(list[i].publishStatus==1){
                  successRelease++ //发布成功
                }
              }
              else{

                if(list[i].taskStatus==0){
                  daiRelease++ //待发布
                }
                if(list[i].taskStatus==2){
                  successRelease++ //发布成功
                }
                if(list[i].taskStatus==3){
                  failRelease++ //发布失败
                }
              }
              if(list[i] && list[i].taskStatus!=0){
                console.log("list[i].doyiDate.list[0].statistics.digg_count",list[i])
                let exposureAmount=list[i].exposureAmount ? list[i].exposureAmount : 0
                let upvoteAmount=list[i].upvoteAmount ? list[i].upvoteAmount : 0
                let commentAmount=list[i].commentAmount ? list[i].commentAmount : 0
                playAll+=exposureAmount   //曝光数
                diggAll+=upvoteAmount  //点赞数
                commentAll+=commentAmount   //评论数
              }
            }
            console.log("daiRelease,successRelease",daiRelease,successRelease)

            console.log('successRelease',successRelease)

            // daiRelease: 待发布(总)
            // successRelease: 发布成功(总)
            // failRelease: 发布失败(总)
            // playAll: 曝光数(总)
            // diggAll: 点赞数(总)
            // commentAll: 评论数(总)
            this.list[0].num=successRelease
            this.list[1].num=daiRelease
            this.list[2].num=failRelease
            this.list[3].num=playAll
            this.list[4].num=diggAll
            this.list[5].num=commentAll
            console.log("this.list======",this.list)
          })
          .catch((e) => {
            this.$message.error(e);
          });
      },

      // 数据刷新
      dataRefresh(){
        this.loading=true
        matrixDataRefresh({
          // page: 1,// 分页参数 *必需
          // limit: 10, // 每页展示多少数量
          dyPublishId:this.accountLists.dyPublishId,
          types: this.accountLists.types
        })
          .then((data) => {
            this.$message.success('刷新成功!');
            this.reloadList()
            this.loading=false
          })
          .catch((e) => {
            this.loading=false
            this.$message.error(e);
          });
      },
      /* 刷新表格 */
      reloadList(where) {
        console.log("where",where)
        this.allGetNum()
        if(where==1){
          this.$nextTick(()=>{
            console.log("this.$refs.accountTable",this.$refs.accountTable)
            this.$refs.accountTable.reload({  page: 1,where: where });
          })
        }
        else{
          this.$refs.accountTable.reload({  where: where });
        }
      },
      // 删除
      delMoreGroup(){
        let isTrue=false
        if (this.selection.length>0) {
          var ids=this.selection.map(item => {
            // <!--notTask ： 0.不能终止，2 可以终止-->
            if(item.taskProgressCount==100 || item.notTask==0){
              isTrue=true
              return
            }
            return item.id
          })

          console.log('删除点击事件his.selection===', this.selection ,'ids',ids,'isTrue',isTrue)
          if(!isTrue){
            this.$message.error('进行中的任务不能删除，请先终止任务');
          }
          else{
            this.delGroups(ids)

          }
        }
        else{
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }

      },
      /* 查看进度 */
      edit (row) {
        this.current = row;  // 表格的行数据赋值给 current
        this.accountLists.dyPublishId=row.id
        this.accountLists.types= this.publish.types
        this.columns2[0].show = this.publish.types!=2 ? false : true
        this.columns2[7].show = this.publish.types!=2 ? false : true
        this.columns2[9].show = this.publish.types!=4 ? true : false
        // this.listData()
        this.stautsIndex=0
        delete this.accountLists.taskStatus // 查看进度 任务状态恢复默认“全部”
        this.reloadList(1)
        this.showEdit = true;
      },

      /*终止任务*/
      terminateTaskSingle(row) {
        this.$confirm('确定终止该任务吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          terminateTask({
            id:row.id
          })
            .then((data) => {
              this.reload()
              this.$message.success('终止成功');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消');
        });

      },

      /* 删除 */
      delSingle(row) {
        let ids=[]
        ids.push(row.id)
        console.log("ids====",ids)
        this.delGroups(ids)
      },
      delGroups(ids){
        this.$confirm('此操作将永久删除该任务, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delDypublish({
            ids:ids
          })
            .then((data) => {
              this.reload()
              this.$message.success('删除成功!');
            })
            .catch((e) => {
              this.$message.error(e);
            });
        }).catch(() => {
          this.$message.info('已取消删除');
        });
      },

      // 查看评论
      viewComments(row){
        console.log("点击了查看评论",row)
        this.commentId=row.id
        this.isComments=true
        this.$nextTick(()=>{
          this.$refs['comments'].reload()
        })
      },
      // 观看作品
      viewWorks(row){
        console.log("点击了观看作品",row)
        // let videoUrl = row.doyiDate.list[0].share_url
        let videoUrl = row.videUrl
        window.open(videoUrl)
      },
      // 任务链接
      taskLink(row){
        console.log("点击了任务链接",row)
        this.agentVisible=true
        let info = JSON.stringify(row.id)
        console.log("info",info)
        // 任务链接 二维码图
        var host =window.location.host;
        let codeImg = 'https://'+host+'/H5/tasklink_index.html?id='+encodeURIComponent(info)
        // let codeImg='https://oemkk.weijuyunke.com/H5/index.html?id='+encodeURIComponent(info)
        console.log('codeImg',codeImg)
        this.$nextTick(()=>{
          this.$refs['code'].show(codeImg)
        })
      },

      // 置顶
      topClick(){
        console.log("点击了置顶")
        this.reloadList()
      }
    }
  };
</script>

<style scoped lang="less">

  .top-padding{
    padding: 39px 25px 0px ;
    .cloumn-data{
      text-align: center;
      /*多加一格，增加空隙*/
      width: calc(100%/7);
      box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.08);
      border-bottom: 3px solid #DDF0FF;
      color: #757575;
      padding: 18px 0 12px;
      div{
        margin-top: 12px;
        font-size: 32px;
      }
    }
  }
  /*表格头部按钮*/
  .btn-class{
    margin: 10px 0;
    .el-button{
      padding: 0;
      width: 94px;
      border-radius: 2px;
      height: 33px;
    }
  }
  /* 置顶 样式*/
  .top-class{
    position: absolute;
    top: 0;
    left: 7px;
    color: #1E6CEB;
    font-size: 12px;
    padding: 5px 7px;
    background: #DDF0FF;
    border-radius: 2px;
  }

  /*成功*/
  .success{
    width: 57px;
    height: 27px;
    background: #DDF0FF;
    border-radius: 2px;
  }
  /*待发布*/
  .s-dai{
    color: #1E6CEB;
  }
  /*失败*/
  .fail{
    color: #757575;
  }


  /*进度条，已完成背景*/
  .completed{
    span{
      width: 56px;
      height: 23px;
      background: #EAFFF0;
      border-radius: 2px;
      color: #31A952;
      font-size: 12px;
    }
  }
  /*‘编辑’ 抽屉*/
  .m25{
    margin: 25px 0;
  }
  .numberCount{
    width: calc(100% / 3);
    span{
      color: #757575;
    }
    div{
      margin-top: 11px ;
      color: #1E6CEB;
      font-size: 32px;
    }
  }

  /*数据刷新 按钮*/
  .btn-refresh{
    background: #1E6CEB;
    border-radius: 2px;
    margin:40px 20px 17px;
  }
  .m-table{
    margin: 0 20px 20px;
    /*padding: 20px;*/

    .stauts-class,.sel-stauts-class{
      font-size: 16px;
      margin:0 52px 0 26px;
      padding: 23px 0px 15px;
      line-height: 19px;
    }
    .stauts-class{
      color: #757575;
    }
    .sel-stauts-class{
      color: #1E6CEB;
      border-bottom:3px solid #1E6CEB;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
    }
  }
</style>
